<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery核心函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        window.onload=function(ev){
            let p=document.createElement("p");
            let pn=document.createTextNode("hello");
            p.appendChild(pn);
            let element=document.getElementsByTagName("div")[0];
            element.appendChild(p);
        };
<!--        jQuery核心函数-->
    //    入口
        $(function () {
            alert("hello world");
        //    接受一个字符串选择器
            var $box1=$(".div1");
            var $box2=$("#div2");
            console.log($box1);
            console.log($box2);
        //    增加字符串代码
        //     console.log($p);
            var c = $("<p>123</p>");
            console.log(c);
            $box2.append(c);
        //    接受dom元素
            let span=document.getElementsByTagName("span")[0];
            console.log(span);
            let $span=$(span);
            console.log($span);
        });
    </script>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            margin: 0;
            border: 2px solid #eeff80;
            border-radius: 20px ;
            background-color: #194738;
            outline: none;
            box-shadow: 2px 4px 8px red;
            font-family: "Microsoft YaHei UI";
            color: #cccccc;
            text-align: center;
        }
        #div2{
            width: 100px;
            height: 100px;
            /*margin: 0;*/
            margin-top: 10px;
            border: 2px solid #ffb6d7;
            border-radius: 20px;
            background-color: aqua;
            outline: none;
            box-shadow: 2px 4px 8px rosybrown;
            font-family: "Microsoft YaHei UI";
            color: #cccccc;
            text-align: center;
        }
        span {
            display: block;
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 19px;
            box-shadow: 8px 4px 5px cornflowerblue;
            margin-top: 20px;
            text-align: center;
            padding-top: 30px;
            box-sizing: border-box;
        }
    </style>

</head>
<body>
<div class="div1"></div>
<div id="div2"></div>
<span>我是span</span>
</body>
</html>